<template>
	<div class="wrapper record">
		<head-title :title="headText" @callback="onClickLeft"></head-title>
		<div class="e-record wrapbd">
			<ul class="e-recordDetails">
				<li v-for="(item,index) in recordDetails.product_list" :key="index">
					<div class="left"><img :src="item.cover_img"></div>
					<div class="left">
						<span>{{item.product_name}}</span>
						<span>￥{{item.unit_point}}<label class="right">数量：{{item.buy_num}}</label></span>
					</div>
				</li>
			</ul>
			<ul class="recordnav">
				<li><span class="left">订单编号</span><span class="right">{{recordDetails.order_no}}</span></li>
				<li><span class="left">下单时间</span><span class="right">{{recordDetails.create_time | fmtDate}}</span></li>
				<li><span class="left">支付时间</span><span class="right">{{recordDetails.pay_time | fmtDate}}</span></li>
				<li><span class="left">购买数量</span><span class="right">{{recordDetails.product_num}}件</span></li>
				<li><span class="left">支付状态</span><span class="right">{{recordDetails.status_text}}</span></li>
				<li><span class="left">消费总额</span><span class="right">￥{{recordDetails.pay_point}}</span></li>
			</ul>
		</div>
		<!-- <input class="l_button" type="button" value="确认" @click="onClickaddBank" :disabled="disableBtn"> -->
	</div>
</template>
<script>
	import HeadTitle from "./../../components/title.vue"
	export default {
		data(){
			return {
				headText: '订单详情',  //顶部标题
				recordDetails:{},  //详情
			}
		},
		mounted(){
            this.initialize();  //获取订单详情
		},
		methods:{
			//左上角返回键
			onClickLeft () { this.$router.go(-1);},
			//获取订单详情
			initialize(){
				var _this = this;
				this.Tools.AXIOS({
                    url: 'order/detail',
					transformRequest:{
                        order_no: this.$route.query.id,
					},
                    success: function (res) {
                        _this.recordDetails = res.data.data
                    }
                })
			},
		},
		components: {
			HeadTitle
		},
	}
</script>
<style scoped>
	.record{ width: 100%; background: #fff;}
	.e-recordDetails{ overflow: hidden; }
	.e-recordDetails li{ width: 100%; overflow: hidden; padding: 19px 0; border-bottom: 5px solid #F1F1F1;}
	.e-recordDetails li div:nth-of-type(1){ width: 20%;}
	.e-recordDetails li div:nth-of-type(1){ padding: 0 2%; overflow: hidden;}
	.e-recordDetails li div:nth-of-type(1) img{ width: 100%;}
	.e-recordDetails li div:nth-of-type(2){ width: 75%;}
	.e-recordDetails li div:nth-of-type(2) span{ width: 100%;}.e-recordDetails li div:nth-of-type(2) span label{ color: #666;}
	.e-recordDetails li div:nth-of-type(2) span:nth-of-type(2){ margin-top: .8rem;}
	.e-recordDetails li div span{ display: block; font-size: .35rem;}
	.e-recordDetails li div label{ font-size: .35rem; color: #AC956C; margin-right: .5rem;}
	.recordnav{ overflow: hidden; padding: 0 .3rem .6rem; }
	.recordnav li{ padding: .2rem 0; font-size: .35rem; color: #666; margin: .4rem 0;}
	.recordnav li span:nth-child(1){ color: #BDBDBD; }
	.recordnav li span:nth-of-type(2){ width: 80%; text-align: right;}
	.recordnav li:nth-last-of-type(1) span:nth-of-type(2){ color: red; font-size: .45rem; font-weight: bold;}
	.recordnav li.orderNo{ position: relative; color: #000;}
	.recordnav li.orderNo span:nth-child(1){ color: #000; }
	.recordnav li.orderNo i{ position: absolute; right: 0; top: 1.2rem;}
	.recordnav li.orderNo span:nth-of-type(2){ width: 60%; padding-right: 1.5rem;}
	.isdetail{ background: #95790F;}
</style>
